<template>
  <div>
    <!-- 头部 -->
    <div>
    <van-nav-bar left-text="选择门店" left-arrow @click-left="toProduct"/>
    </div>
    <!-- 中间 -->
<<<<<<< HEAD
    <div>
=======
    <div class="loca">
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
      <router-link to="/city" class="rl" v-if='$store.state.ConfirmResult'>{{$store.state.ConfirmResult}}
        <span>></span>
      </router-link>
       <router-link to="/city" class="rl" v-else>西安市
        <span>></span>
      </router-link>
    </div>
    <div id="container"></div>

    <div class="all"  style="border: 1px solid #a7d500;">
      <div class="left">
        <div class="d1">
          <p>西安大都会店</p>
          <button>可外卖</button>
        </div>
        <div class="d2">
          <div class="d3">
          <van-icon name="location-o" />
          <p>陕西省西安市雁塔区科技七路305号西安大都会项目七号楼1F710104单元</p>
          </div>

          <div class="d4">
          <van-icon name="clock-o" />
          <p>营业时间:10:00-22.30</p>
          </div>
         
        </div>
        
      </div>
      <div class="right">
        <p class="p1">去下单</p>
        <p class="p2">距离1.1km</p>
        <div class="d5">
          <button>
               <van-icon name="phone" color="#a7d500" @click="callphone"/>
            </button>
          <button><van-icon name="location" color="#a7d500"/></button>
        </div>
      </div>
    </div>
        <div class="all">
      <div class="left">
        <div class="d1">
          <p>西安高新中大店</p>
          <button>可外卖</button>
        </div>
        <div class="d2">
          <div class="d3">
          <van-icon name="location-o" />
          <p>陕西省西安市高新区高新路中大国际商业中心B1层第B131+132号</p>
          </div>

          <div class="d4">
          <van-icon name="clock-o" />
          <p>营业时间:10:00-22.00</p>
          </div>
         
        </div>
        
      </div>
      <div class="right">
        <p class="p1">去下单</p>
        <p class="p2">距离1.3km</p>
        <div class="d5">
          <button>
               <van-icon name="phone" color="#a7d500" @click="callphone"/>
            </button>
          <button><van-icon name="location" color="#a7d500"/></button>
        </div>
      </div>
    </div>
            <div class="all">
      <div class="left">
        <div class="d1">
          <p>西安蓝岛广场PRO店</p>
          <button>可外卖</button>
        </div>
        <div class="d2">
          <div class="d3">
          <van-icon name="location-o" />
          <p>陕西省西安市高新区科技六路4号1F</p>
          </div>

          <div class="d4">
          <van-icon name="clock-o" />
          <p>营业时间:8:00-22.30</p>
          </div>
         
        </div>
        
      </div>
      <div class="right">
        <p class="p1">去下单</p>
        <p class="p2">距离2.5km</p>
        <div class="d5">
          <button>
               <van-icon name="phone" color="#a7d500" @click="callphone"/>
            </button>
          <button><van-icon name="location" color="#a7d500"/></button>
        </div>
      </div>
    </div>

       <van-action-sheet v-model="show" :actions="actions"  cancel-text="取消"  @select="onSelect"/> 
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    data() {
      return {
        map: null,
        show: false,
        actions: [{ name: '门店电话:13925242440' }, { name: '客服电话:4008981577' }],
      }
    },
    methods: {
      callphone() {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = true;
    },
    onSelect(item){
      console.log(item.name.split(':')[1]);
       window.location.href=`tel:${item.name.split(':')[1]}`
    },
  
      initMap(){
        AMapLoader.load({
            key:"8fa81c5633f3352c4e4dbeaa63503526", // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",    // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:['AMap.ToolBar'],    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:15,           //初始化地图级别
                center:[108.891843,34.237716], //初始化地图中心点位置
            });
            this.map.addControl(new AMap.ToolBar());
        }).catch(e=>{
            console.log(e);
        })
         
    },
      toProduct() {
        this.$router.push('/product')
      }
    },
    mounted () {
       //DOM初始化完成进行地图初始化
        this.initMap();;
    },
  }
</script>

<style >
  #container{
    width: 100%;
    height: 200px;
    padding:0px;
    margin-top: 10px;
  
  }
  .van-nav-bar__text{
    color: black;
  }
  .van-nav-bar .van-icon{
    color: black;
  }
  .rl{
    padding: 20px;
    color: black;
  }
  .all{
    display: flex;
    border: 1px solid lavender;
    margin: 7px;
    border-radius: 5px;
    padding: 15px 0 15px 0;
  }
  .left{
    width: 68vw;
   border-right: 1px solid lightblue;
  }
   .d1{
    display: flex;
    margin: 0 0 10px 10px;
    font-weight: 800;
    font-size: 14px;
    
  }
  .van-icon{
    margin-right: 5px;
  }
  .d1 button{
    margin-left: 10px;
    border: 0;
    background-color: #a7d500;
    padding: 1px;
    font-size: 10px;
  }
    .d3{
    display: flex;
    
    font-size: 13px;
    margin: 10px;
  }
    .d4{
    display: flex;
    font-size: 13px;
    margin: 10px 0 0 10px; 
  }
  .right{
    width: 28vw;
  }
  .right .p1{
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin: 7px 0;
  }
   .right .p2{
    font-size: 10px;
    text-align: center;
    margin: 7px 0;
  }
  .d5{
    display: flex;
    justify-content: space-around;
  }
  .d5 button{
    border-radius: 50%;
    border: 0;
    width: 28px;
    height: 28px;
  }
<<<<<<< HEAD
=======
.rl{
  padding: 2vw 2vw;
}
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
</style>